<script setup lang="ts">
// import {
// 	computed
// } from "vue";
const props = defineProps({
	circle: {
		type: Boolean,
		default: false
	},
	width: {
		type: String,
		default: '50rpx'
	},
	height: {
		type: String,
		default: '50rpx'
	},

	backgroundColor: {
		type: String,
		default: '#EBEBEB'
	}
})

// computed(() => {

// })

let height = props.height
let width = props.width
let background = props.backgroundColor

</script>
<template>
	<view class="skeleton" :class="{circle}"></view>
</template>



<style scoped lang="scss">
.skeleton {
	height: v-bind(height);
	width: v-bind(width);
	background-color: v-bind(background);
	animation: opacity 0.8s infinite;
}



@keyframes loading {
	0% {
		background-size: 300% 100%;
		background-image: linear-gradient(100deg, #eee 40%, #fff 50%, #eee 60%);
		background-position: 100% 50%;
	}

	100% {
		background-size: 300% 100%;
		background-image: linear-gradient(100deg, #eee 40%, #fff 50%, #eee 60%);
		background-position: 0 50%;
	}

}

@keyframes loading-transform {
	0% {
		transform: skewX(-10deg) translateX(-100%);
	}

	100% {
		transform: skewX(-10deg) translateX(200%);
	}
}



@keyframes opacity {
	0% {
		opacity: 1;
	}

	50% {
		opacity: 0.3;
	}

	100% {
		opacity: 1;
	}
}


.circle {
	border-radius: 50%;
}
</style>
